/* 通用选择器 * 通常不建议使用 */


/* * {
    margin: 0;
    padding: 0;
} */


/* 类型选择器 */


/* ID选择器 */

#main {
    color: blue;
}


/* 类选择器 */

.news_title {
    color: brown;
}


/* 元素选择器 */

h3 {
    color: crimson;
}


/* 属性选择器 */

[title] {
    font-size: 1.5em;
}


/* 所有的含有title的字体都改变了 */

p[data-bind] {
    color: blue;
}


/* 在p中含有data-bind的改变了 */

p[title="abc"] {
    color: red;
}


/* titie为abc的p变化了 */

p[title~="de"] {
    color: darkgoldenrod;
}


/* title中含有de的p变化了 */

p[title|="xyz"] {
    color: gold;
}


/* title以xy开头的p变化了 */

a[href][title] {
    font-size: 0.75em;
    color: aqua;
}


/* 伪类与伪元素选择 */


/*背景色变化*/

li:hover {
    background-color: aqua;
}


/* 未点击链接时为红色 */

a {
    color: red;
}


/* 点击链接之后变紫 */

a:visited {
    color: purple;
}


/* 鼠标移动到字体时加粗 */

a:hover {
    font-weight: bold;
}


/* 鼠标点击时的时候变绿 */

a:active {
    color: green;
}


/* 选中input时变灰色 */

input:focus {
    background-color: gray;
}


/* 将第一个pre元素变红 */

pre:first-child {
    color: red;
}


/* 将第一个li元素变红 */

li:first-child {
    color: red;
}


/* 注意：这是在父容器中元素的性质 */


/* div标签内p的第一行变红 */

div p::first-line {
    color: red;
}


/* div标签内p的第一个字符变大变粗 */

div p::first-letter {
    font-weight: bold;
    font-size: 200%;
}

div h1:before {
    content: "before:";
}

div h1:after {
    content: ":after";
}

div span {
    color: blueviolet;
}

p>span {
    color: hotpink;
}

pre+span {
    color: burlywood;
}

pre~span.bro {
    color: grey;
}